<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="common/common :: headblock('查看Gluejob代码')"></div>
<!--  引入自定义CSS -->

<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="/jslib/codemirror/lib/codemirror.css" />

<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="/jslib/codemirror/theme/dracula.css" />

<!--支持代码折叠-->
<link rel="stylesheet" href="/jslib/codemirror/addon/fold/foldgutter.css" />

<!--支持代码联想提示-->
<link rel="stylesheet" href="/jslib/codemirror/addon/hint/show-hint.css" />

<!--end Code Mirror -->

<style type="text/css">
.CodeMirror {
	font-size: 16px;
	width: 100%;
	height: 100%;
	/*bottom: 0;*/
    /*top: 0px;*/
	/*position: absolute;*/
}
</style>
</head>

<body class="skin-blue fixed layout-top-nav">
	<div class="wrapper">

		<header class="main-header">
			<nav class="navbar navbar-static-top">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand"><b>Web</b>IDE</a>
					</div>

					<div class="collapse navbar-collapse pull-left"
						id="navbar-collapse">
						<ul class="nav navbar-nav">
						    <li style="display:none" th:text="${gluejob.id}"></li>
							<li class="active"><a href="javascript:editWebIdeTile();">
							<span>【GLUE( </span>
							<span th:text="${gluejob.type}">Gluejob类型</span>
							<span> )】</span>
							<span th:text="${gluejob.descript}">Gluejob描述标题</span>
							</a></li>
						</ul>
					</div>

					<div class="collapse navbar-collapse pull-right"
						id="navbar-collapse">
						<ul class="nav navbar-nav">
							<li id="save"><a href="javascript:saveFunction();">
							<i class="fa fa-fw fa-save"></i> <span>保存</span>
							</a></li>
						</ul>
					</div>
					<!-- 
                    <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav" >
                            <li id="save" >
								<a href="javascript:;" >
									<i class="fa fa-fw fa-save" ></i>
                                    <span>保存</span>
								</a>
							</li>
                        </ul>
                    </div>
                     -->
				</div>
			</nav>
		</header>

		<div class="content-wrapper" id="ideWindow"></div>
	</div>


	<!-- 引入通用javaScript -->
	<!-- jQuery 3 -->
	<script
		src="/jslib/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap 3.3.7 -->
	<script
		src="/jslib/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="/jslib/adminlte/dist/js/adminlte.min.js"></script>
	<!--  引入自定义javaScript -->

	<script src="/jslib/codemirror/lib/codemirror.js"></script>
	<!--Java代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/clike/clike.js"></script>
	<!--groovy代码高亮-->
	<script src="/jslib/codemirror/mode/groovy/groovy.js"></script>
	<!--python代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/python/python.js"></script>
	<!--shell代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/shell/shell.js"></script>
	<!--sql代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/sql/sql.js"></script>
	<!--go代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/go/go.js"></script>

	<!--支持代码折叠-->
	<script src="/jslib/codemirror/addon/fold/foldcode.js"></script>
	<script src="/jslib/codemirror/addon/fold/foldgutter.js"></script>
	<script src="/jslib/codemirror/addon/fold/brace-fold.js"></script>
	<script src="/jslib/codemirror/addon/fold/comment-fold.js"></script>
	<!--括号匹配-->
	<script src="/jslib/codemirror/addon/edit/matchbrackets.js"></script>
	<script src="/jslib/codemirror/addon/edit/closebrackets.js"></script>
	<!--支持代码联想提示-->
	<script src="/jslib/codemirror/addon/hint/show-hint.js"></script>
	<script src="/jslib/codemirror/addon/hint/anyword-hint.js"></script>

	<script th:inline="javascript">
		//根据DOM元素的id构造出一个编辑器
		//CodeMirror.fromTextArea(document.getElementById("ideWindow"),
		var editor = CodeMirror(document.getElementById("ideWindow"), {
			extraKeys : {
				"Ctrl" : "autocomplete"
			}, //ctrl可以弹出提示
			mode : "JavaScript",
			mode : "text/x-python", //实现python代码高亮
			mode : "text/x-sh", //实现shell代码高亮
			mode : "text/x-java", //实现java代码高亮
			lineNumbers : true, //显示行号
			lineWrapping : false, //自动换行
			//line: true,
			styleActiveLine : true, // 选中行高亮
			theme : "dracula", //设置主题
			foldGutter : true,
			gutters : [ "CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers" ],
			matchBrackets : true, //括号匹配
			autoCloseBrackets : true,
			hintOptions : {
				hint : synonyms
			}, // 自动提示配置
			lint : true, // 代码出错提醒
			indentUnit : 4, // 缩进配置（默认为2）
		//readOnly: true,        //只读
		});
		editor.setSize('100%', '550px');     //设置代码框的长宽
		//editor.setSize('100%', '100%');     //设置代码框的长宽

		editor.setValue( [[ ${gluejob.jobcode!=null?gluejob.jobcode:''} ]] );    //先代码框的值清空
		//editor.setValue(obj.scriptCode);    //给代码框赋值
		//editor.setOption("readOnly", true);

		// 自动提示需要支持Pormise， 当当前数据的字符串满足comp中的某一个word时，会提示该word所在数组的词汇
		if (typeof Promise !== "undefined") {
			comp = [
					[ "here", "hither" ],
					[ "asynchronous", "nonsynchronous" ],
					[ "completion", "achievement", "conclusion", "culmination",
							"expirations" ],
					[ "hinting", "advive", "broach", "imply" ],
					[ "function", "action" ],
					[ "provide", "add", "bring", "give" ],
					[ "synonyms", "equivalents" ], [ "words", "token" ],
					[ "each", "every" ], ];
		}

		// 提示功能的代码， 可以适当修改来满足自己的需求
		function synonyms(cm, option) {
			return new Promise(function(accept) {
				setTimeout(function() {
					var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
					var start = cursor.ch, end = cursor.ch
					while (start && /\w/.test(line.charAt(start - 1)))
						--start
					while (end < line.length && /\w/.test(line.charAt(end)))
						++end
					var word = line.slice(start, end)
					for (var i = 0; i < comp.length; i++) {
						if (comp[i].indexOf(word) != -1) {
							return accept({
								list : comp[i],
								from : CodeMirror.Pos(cursor.line, start),
								to : CodeMirror.Pos(cursor.line, end)
							});
						}
						return accept(null)
					}
				}, 10)
			})
		}
		
		// 额外配置快捷键
		editor.addKeyMap({
			'Ctrl-S' : function() {
				saveFunction();
			},
			'Ctrl-s' : function() {
				saveFunction();
			},
			'Ctrl-f' : autoFormatSelection,
		});

		//  自动格式化编辑器
		function autoFormatSelection() {
			CodeMirror.commands["selectAll"](editor);
			var range = getSelectedRange();
			editor.autoFormatRange(range.from, range.to);
			editor.commentRange(false, range.from, range.to);
			alert("autoFormatSelection");
		}
		
		// 获取编辑器中选中范围的的行号
		function getSelectedRange() {
			return {
				from : editor.getCursor(true),
				to : editor.getCursor(false)
			}
		}
		
	    // 处理saveFunction
        function saveFunction() {
	    	console.log("doing save...");
	    	var jobcode = editor.getValue();
	    	var jobId = [[${gluejob.id}]] ;
	    	//alert(jobId + " : " + jobcode);
	    	console.log(jobId);
	    	console.log(jobcode);
	    	console.log({"id":jobId,"jobcode":jobcode});
	    	$.ajax({
	            //几个参数需要注意一下
	            type: "POST",//方法类型
	            dataType: "json",//预期服务器返回的数据类型
	            url: "/gluejob/editjobcode.html", //url
	            data: {"id":jobId,"jobcode":jobcode},
	            success: function (result) {
	                console.log(result);//打印服务端返回的数据(调试用)
	                if (result.code == 0) {
	                    alert("接受数据成功，状态：SUCCESS");
	                } else if (result.code == 1) {
	                    alert("接受数据成功，状态：FAIL");
	                } else if (result.code == 2) {
	                    alert("接受数据成功，状态：EXCEPTION");
	                };
	            },
	            error : function() {
	                alert("接受数据异常！");
	            }
	        });
	    	
            //alert(editor.getValue());
        }

		//editor.replaceSelection("内容");   // 替换选中的字符串、在光标处插入字符
		//editor.setSize('100%', '100%');     //设置代码框的长宽
		//CodeMirror.commands["selectAll"](editor);    // 执行内置的命令
		//CodeMirror.commands["goDocEnd"](editor)  //移动到文件尾部
		//editor.refresh();   	    // 插件不显示文本内容，直到点击才出现

		
		
		$(function(){

		});
	</script>

</body>
</html>